<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angular01学习示例</title>
        <script src="../js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var BoxCtrl = function($scope, $element) {
                //$element 就是一个jQuery对象
                var element = $element.children().eq(0);
                $scope.w = element.width();
                $scope.h = element.height();

                $scope.click = function() {
                    $scope.w = parseInt($scope.w, 10) + 10;
                    $scope.h = parseInt($scope.h, 10) + 10;
                };

                $scope.$watch('w', function(to, from) {
                    element.width(to);
                });

                $scope.$watch('h', function(to, from) {
                    element.height(to);
                });
            };
            $(document).ready(function() {
                angular.bootstrap(document.documentElement);
            });
        </script>
    </head>
    <body>
        <div ng-controller="BoxCtrl">
            <div style="width: 100px; height: 100px; background-color: red;"
            ng-click="click()"></div>
            <p>
                {{w}} x {{h}}
            </p>
            <p>
                W:
                <input type="text" ng-model="w" />
            </p>
            <p>
                H:
                <input type="text" ng-model="h" />
            </p>
        </div>
    </body>
</html>